<template>
  <div id="add_template" class="menu-set">
    <fieldset class="layui-elem-field layui-field-title" v-for="type in list" :key="type.name" v-if="type.list.length!=0">
      <legend>{{type.name}}</legend>
      <div class="layui-field-box">
        <ul class="clearfix">
          <li v-for="(item,index) in type.list" :key="index">
            <div class="addmod" v-on:click="addthismod(item)" :class="{alerdyadd:item.alerdyadd}">
              <div class="iconBox">
                <i :class="['iconfont',item.icon]"></i>
              </div>
              <div class="name">{{item.name}}</div>
            </div>
          </li>
        </ul>
      </div>
    </fieldset>
  </div>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from 'vuex'
  export default {
    computed: {
      ...mapState([
        "modLists",
        "container",
        "pageConfig"
      ]),
      list() {
        var that = this;
        var arr = [{
          name: "活动模块",
          list: []
        }, {
          name: "主办方模块",
          list: []
        }, {
          name: "基本模块",
          list: []
        }]
        that.modLists.forEach(function (item) {
          if (item.Type == 0) {
            arr[0].list.push(that.factory(JSON.parse(item.DefaultConfig)));
          } else if (item.Type == 1) {
            arr[2].list.push(that.factory(JSON.parse(item.DefaultConfig)));
          } else if (item.Type == 2) {
            arr[1].list.push(that.factory(JSON.parse(item.DefaultConfig)));
          }
        });
        return arr;
      },
      // showlist: function () {
      //   var that = this;
      //   for (let i = 0; i < that.modLists.length; i++) {
      //     that.modLists[i].alerdyadd = false;
      //     if (!that.modLists[i].repeatadd) {
      //       for (let j = 0; j < that.container.items.length; j++) {
      //         if (that.modLists[i].id == that.container.items[j].id) {
      //           that.modLists[i].alerdyadd = true;
      //         }
      //       }
      //     }
      //   }
      //   return that.modLists
      // }
    },
    methods: {
      addthismod: function (item) {
        this.addMod(item);
      },
      factory(mod) {
        mod.alerdyadd = false;
        if (!mod.repeatadd) {
          for (let j = 0; j < this.container.items.length; j++) {
            if (mod.id == this.container.items[j].id) {
              mod.alerdyadd = true;
            }
          }
        }
        return mod;
      },
      ...mapMutations([
        "addMod"
      ])
    }
  }
</script>

<style scoped>
  .iconBox {
    text-align: center;
    padding: 9px 0 6px;
  }

  .name {
    text-align: center;
  }

  .iconfont {
    font-size: 35px;
  }
</style>